// 导入AppKit相关组件 - AppKit是WalletConnect的新一代钱包连接解决方案
import { AppKitProvider, AppKitButton, AppKitConnectButton, createAppKit} from '@reown/appkit/react'
// 导入支持的区块链网络
import { mainnet, arbitrum, solana, polygon } from '@reown/appkit/networks'
// 导入Wagmi相关组件 - Wagmi是以太坊React Hooks库
import { WagmiProvider } from 'wagmi'
// 导入React Query组件 - 用于数据获取、缓存和状态管理
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// 导入Wagmi适配器 - 用于连接AppKit和Wagmi
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

export default function App() {
  // 创建React Query客户端实例 - 用于管理API请求和状态
  const queryClient = new QueryClient()
  
  // 配置应用元数据 - 这些信息会显示在钱包连接弹窗中
  const metadata = {
    name: 'AppKit',            // 应用名称
    description: 'AppKit Example',  // 应用描述
    url: window.location.origin,    // 应用URL（必须与您的域名和子域名匹配）
    icons: ['https://avatars.githubusercontent.com/u/179229932']  // 应用图标
  }
  
  // 定义支持的CAIP格式网络 - CAIP是跨链身份协议标准
  const caipNetworks = [mainnet]  // 当前仅支持以太坊主网
  
  // 从环境变量获取WalletConnect项目ID - 用于身份验证和API访问
  const projectId = import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID
  
  // 创建Wagmi适配器实例 - 将AppKit与Wagmi集成
  const wagmiAdapter = new WagmiAdapter({
    networks: caipNetworks,  // 设置支持的网络
    projectId,              // 设置项目ID
    ssr: false               // 服务端渲染设置为false（客户端渲染应用）
  })
  
  // 初始化AppKit - 配置钱包连接功能
  createAppKit({
    adapters: [wagmiAdapter],  // 添加Wagmi适配器
    networks: caipNetworks,    // 设置支持的网络
    projectId,                // 设置项目ID
    metadata,                 // 设置应用元数据
    features: {
      analytics: true // 启用分析功能（可选，默认为Cloud配置）
    }
  })
  
  return (
    // WagmiProvider提供Wagmi配置给整个应用
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      {/* QueryClientProvider提供React Query功能 */}
      <QueryClientProvider client={queryClient}>
        {/* AppKitConnectButton是钱包连接按钮组件 */}
        {/* 点击后会显示钱包选择界面 */}
        <AppKitConnectButton />
      </QueryClientProvider>
    </WagmiProvider>
  )
}
